<template>
    <div class="mapBack" :style="{'height':52+parseInt(statusBarHeight?statusBarHeight:0)+'px','padding-top':statusBarHeight?(statusBarHeight +'px'):'0'}">
        <a @click="mapBack"><van-icon name="arrow-left" /></a>
        <span>百度地图</span>
    </div>
    <iframe :src="`https://api.map.baidu.com/marker?location=${lat},${lng}&title=${name}&content=&output=html&src=webapp.baidu.openAPIdemo`" frameborder="0" :style="{'padding-top':statusBarHeight?(statusBarHeight +'px'):'0'}"></iframe>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {Icon as vanIcon} from 'vant'
import {loading} from '@/utils/common'
export default {
    props:{

    },
    components:{
        vanIcon
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            lat:'',
            lng:'',
            name:'',
            statusBarHeight:computed(()=>store.state.arApi.statusBarHeight)
        })

        onMounted(()=>{
            state.lat = route.query.lat
            state.lng = route.query.lng
            state.name = route.query.name
            loading.close()
        })

        const mapBack = ()=>{
            router.back(-1)
        }


        return{
            ...toRefs(state),
            mapBack
        }
    }
}
</script>

<style lang="scss" scoped>
    .mapBack{
        display: flex;
        background: #fff;
        position:fixed;
        width: 100%;
        z-index: 11;
        left: 0;
        top: 0;
        a{
            display: flex;
            width: 100px;
            height: 100%;
            justify-content: center; /* 水平居中 */
            align-items: center; 
            img{
                display: block;
                width: 36px;
            }
            i{
                font-size: 42px;
                color: #333;
            }
        }
        span{
            display: flex;
            flex: 1;
            justify-content: center; /* 水平居中 */
            align-items: center; 
            color: #333;
        }
    }
    iframe{
        position:fixed;
        left: 0;
        top: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
        background: #fff;
    }
</style>